<template>
  <div class="acc">
    <el-card class="box-card">
      <el-container>
        <el-aside width="400px">
          <!-- 所属天线  IP地址 -->
          <div class="block">
            <span class="demonstration">
              <el-button
                type="primary"
                class="accessterminal"
                plain
                @click="accessterminal()"
                >添加接入终端</el-button
              >
              <!-- 用来展示数据的 -->
              <el-card class="box-card Router-one">
                <el-table
                  :row-class-name="tableRowClassName"
                  :row-style="selectedstyle"
                  @row-click="rowClick"
                  :data="
                    accessterminalsdata.slice(
                      (currentPage - 1) * pageSize,
                      currentPage * pageSize
                    )
                  "
                  style="width: 100%"
                  @cell-click="handle"
                >
                  <el-table-column
                    v-for="(item, index) in tableheadr"
                    :prop="index"
                    :label="item"
                    width="145"
                    :key="index"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="action"
                    class="action"
                    :label="$t('message.center.rcuheaders.action')"
                  >
                    <template slot-scope="scope" class="action">
                      <el-button
                        size="mini"
                        @click.stop="handleEdit(scope.$index, scope.row)"
                      >
                        <i>
                          <img
                            src="../../../../assets/config/center/download.png"
                            alt=""
                          />
                        </i>
                      </el-button>
                      <el-button
                        size="mini"
                        type="danger"
                        @click.stop="handleDelete(scope.$index, scope.row)"
                        ><i class="el-icon-delete"></i
                      ></el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </span>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="current"
              :page-sizes="[5, 10, 15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="accessterminalsdata.length"
            >
            </el-pagination>
          </div>
        </el-aside>
        <el-container class="main">
          <el-main class="embedded">
            <!-- nat 地址   :disabled="rcunat"-->
            <div class="nat">
              地址池
              <el-button
                type="primary"
                class="accesstermianlbu"
                :disabled="rucnatad"
                plain
                @click="addnat()"
                >添加</el-button
              >
              <el-button
                type="danger"
                class="danger"
                :disabled="rcunat"
                plain
                @click="deletenat()"
                >删除</el-button
              >
            </div>
            <el-card class="box-card Router-one" style="height: 300px">
              <el-table
                :data="rcunattask"
                style="width: 100%"
                @cell-click="handlercunat"
              >
                <el-table-column
                  v-for="(item, index) in tableheadrO"
                  :prop="index"
                  :label="item"
                  width="225px"
                  :key="index"
                >
                </el-table-column>
              </el-table>
            </el-card>
            <div class="router">
              路由
              <el-button
                type="primary"
                class="accesstermianlbu"
                :disabled="rucroutead"
                plain
                @click="addroute()"
                >添加</el-button
              >
              <el-button
                type="danger"
                class="danger"
                :disabled="rcuroute"
                plain
                @click="deleteroute()"
                >删除</el-button
              >
            </div>

            <div class="block">
              <span class="demonstration">
                <el-card class="box-card Router-one" style="height: 300px">
                  <el-table
                    :data="rcurouter"
                    style="width: 100%"
                    @cell-click="handleaddrcurouter"
                  >
                    <el-table-column
                      v-for="(item, index) in tableheadrT"
                      :prop="index"
                      :label="item"
                      width="280px"
                      :key="index"
                    >
                    </el-table-column>
                  </el-table>
                </el-card>
              </span>
            
            <el-pagination
              @size-change="handleSizeChangeroute"
              @current-change="handleCurrentChangeroute"
              class="routercu"
              :current-page.sync="currentroute"
              :page-sizes="[5, 10, 15]"
              :page-size="pageSizeroute"
              layout="total, sizes, prev, pager, next, jumper"
              :total="rcurouter.length"
            >
            </el-pagination>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </el-card>
    <div>
      <el-dialog
        :title="$t('message.center.dialogtitle.addrouter')"
        :visible.sync="addrcunat"
        width="400px"
      >
        <el-form
          :model="form"
          status-icon
          :rules="rules"
          ref="form"
          label-width="100px"
          class="demo-form"
          width="300px"
        >
          <el-form-item
            :label="$t('message.center.antenna.table.name')"
            prop="name"
          >
            <el-select v-model="form.name">
              <el-option label="9363上星" value="9363上星"></el-option>
              <el-option label="上星" value="上星"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.routerheaders.net_num')"
            prop="ip"
            width="210px"
          >
            <el-input v-model="form.ip"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">{{
              $t("message.center.buttom.confirm")
            }}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog
        :title="$t('message.center.dialogtitle.addrouter')"
        :visible.sync="editrcu"
        width="400px"
      >
        <el-form
          :model="rcuform"
          status-icon
          :rules="rules"
          ref="form"
          label-width="100px"
          class="demo-form"
          width="300px"
        >
          <el-form-item
            :label="$t('message.center.antenna.table.name')"
            prop="name"
          >
            <el-select v-model="rcuform.name">
              <el-option label="9363" value="9363"></el-option>
              <el-option label="上星2" value="上星2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('message.center.routerheaders.net_num')"
            prop="ip"
            width="210px"
          >
            <el-input v-model="rcuform.ip"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="EidttForm('form')">{{
              $t("message.center.buttom.confirm")
            }}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog
        :title="$t('message.center.dialogtitle.addnat')"
        :visible.sync="rucnatadd"
        width="940px"
      >
        <el-table
          :data="natdatas.nat_tasks"
          style="width: 100%"
          @cell-click="handleaddrcunat"
        >
          <el-table-column
            v-for="(item, index) in tableheadrcunat"
            :prop="index"
            :label="item"
            width="180px"
            :key="index"
          >
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          class="accesstermianrcunat"
          :disabled="rucroutead"
          plain
          @click="handlecreatedrcunat()"
          >{{ $t("message.center.buttom.confirm") }}</el-button
        >
      </el-dialog>
      <!-- routeRcu -->
      <el-dialog
        :title="$t('message.center.dialogtitle.addnat')"
        :visible.sync="rucrouteadd"
        width="830px"
      >
        <el-table
          ref="multipleTable"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :data="rcuroutes"
         
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            v-for="(item, index) in tableheadrcuroute"
            :prop="index"
            :label="item"
            width="180px"
            :key="index"
          >
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          class="accesstermianrcurouter"
         
          plain
          @click="toggleSelection()"
          >{{ $t("message.center.buttom.confirm") }}</el-button
        >
      </el-dialog>
    </div>
  </div>
</template>
    
<style scoped>
aside.el-aside {
  border-right: 1px rgba(0, 0, 0, 0.12) solid;
  overflow: hidden;
  padding-right: 20px;
}
.box-card {
  width: 100%;
  height: 760px;
  margin: 0px 20px 0px 20px;
}
.acc {
  width: 100%;
  height: 760px;
  display: flex;
  overflow: hidden;
}
.Router-one {
  height: 620px;
  margin: 0px !important;
  margin-left: -10px;
}

.cell {
  font-size: 14px;
  font-weight: 800;
  /* line-height: 18px; */
}
/* table头 */
.cell {
  font-size: 11px;
  font-weight: 800;
}
span.el-pagination__jump {
  margin: 0px;
}
/* .demonstration table.el-table__header{
        width: 0px;
} */
.accessterminal {
  background-color: #4e6d9d;
  color: white;
  height: 28px;
  font-size: 12px;
  line-height: 5px;
  font-weight: 800;
  position: relative;
  left: -132px;
  margin-bottom: 10px;
  /* text-align: left; */
}
.danger {
  /* background-color: none !important ; */
  height: 28px;
  font-size: 12px;
  line-height: 5px;
  font-weight: 800;
}
.accesstermianlbu {
  background-color: #4e6d9d;
  color: white;
  height: 28px;
  font-size: 12px;
  line-height: 5px;
  font-weight: 800;
}
.accesstermianrcunat {
  background-color: #4e6d9d;
  color: white;
  height: 40px;
  font-size: 12px;
  line-height: 0px;
  font-weight: 800;
  /* width: 100%; */
  text-align: right;
  margin-top: 28px;
  margin-left: 830px;
}
.accesstermianrcurouter{
   background-color: #4e6d9d;
  color: white;
  height: 40px;
  font-size: 12px;
  line-height: 0px;
  font-weight: 800;
  /* width: 100%; */
  text-align: right;
  margin-top: 28px;
  margin-left: 700px;
}

.embedded .Router-one {
  margin-top: 10px !important;
}
section.el-container.main {
  margin-left: 10px;
}
.nat > button:nth-child(1) {
  margin-left: 20px;
}
.router > button:nth-child(1) {
  margin-top: 10px;
  margin-left: 20px;
}
button.el-button.el-button--danger.el-button--mini {
  border: none;
  padding: 3px;
  background-color: #4e6d9d;
  /* margin-bottom: 79px; */
  /* top: auto; */
  /* margin-top: -32px; */
  position: absolute;
}
button.el-button.el-button--default.el-button--mini {
  padding: 0px;
  border: none;
}
.routercu.el-pagination {
  margin-top: 5px;
  margin-left: 25%;
}
</style>
<script>
import { mapGetters } from "vuex";
const ip_reg = /^(?:(?:2[0-4][0-9]\.)|(?:25[0-5]\.)|(?:1[0-9][0-9]\.)|(?:[1-9][0-9]\.)|(?:[0-9]\.)){3}(?:(?:2[0-5][0-5])|(?:25[0-5])|(?:1[0-9][0-9])|(?:[1-9][0-9])|(?:[0-9]))$/;
export default {
  data() {
    var ip = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入ip地址"));
      } else {
        if (!ip_reg.exec(value)) return callback(new Error("ip地址格式不对"));
        callback();
      }
    };
    return {
      getIndex: "",
      currentPage: 1,
      current: 1,
      pageSize: 5,
      total: 0,
      currentPageroute: 1,
      currentroute: 1,
      pageSizeroute: 5,
      totalroute: 0,
      addrcunat: false,
      rcunat: true,
      rcuroute: true,
      editrcu: false,
      rucnatad: true,
      rucroutead: true,
      rucnatadd: false,
      rucrouteadd: false,
      editrucadd: false,
      editrouteadd: false,
      multipleSelection: [],
      tableheadr: {
        name: this.$t("message.center.rcuheaders.antenna_name"),
        ip: this.$t("message.center.rcuheaders.ip"),
      },
      tableheadrO: {
        name: this.$t("message.center.rcu.name"),
        net_num: this.$t("message.center.rcu.net_num"),
        netmask_len: this.$t("message.center.rcu.netmask_len"),
        gateway: this.$t("message.center.rcu.gateway"),
        dns: this.$t("message.center.rcu.dns"),
      },
      tableheadrT: {
        name: this.$t("message.center.routerheaders.name"),
        net_num: this.$t("message.center.routerheaders.net_num"),
        mask_len: this.$t("message.center.routerheaders.mask_len"),
        gateway: this.$t("message.center.routerheaders.gateway"),
      },
      tableheadrcunat: {
        name: this.$t("message.center.routerheaders.name"),
        netmask_len: this.$t("message.center.routerheaders.mask_len"),
        dns: this.$t("message.center.routerheaders.DNS"),
        gateway: this.$t("message.center.routerheaders.gateway"),
        net_num: this.$t("message.center.routerheaders.net_num"),
      },
      tableheadrcuroute: {
        name: this.$t("message.center.routerheaders.name"),
        mask_len: this.$t("message.center.routerheaders.mask_len"),
        gateway: this.$t("message.center.routerheaders.gateway"),
        net_num: this.$t("message.center.routerheaders.net_num"),
      },
      rules: {
        ip: [{ validator: ip, trigger: "blur" }],
      },
      form: {
        antenna_id: 1,
        name: "",
        ip: "",
      },
      rcuform: [],
      handleaddrcunats: [],
      rcuroutes: [],
      postrcunat_task: {
        rcu_nat_task_ids: [],
      },
    };
  },
  watch: {
    rcunattaskdatas(newVal) {
      this.tableDataO = newVal;
      console.log(123);
    },
    rcuroute(newVal) {
      this.tableDataT = newVal;
    },
  },
  methods: {
     toggleSelection(rows) {
        this.postrcunat_task.rcu_nat_task_ids=[]
      //  console.log(this.multipleSelection);  
       for (const iterator of this.multipleSelection) {
         this.postrcunat_task.rcu_nat_task_ids.push(iterator.id)
       }
        this.$store.dispatch("addrcunattask", this.postrcunat_task);
     },
    handleSelectionChange(val) {

      this.multipleSelection = val;
    },
    selectedstyle({ row, rowIndex }) {
      if (this.getIndex === rowIndex) {
        return {
          "background-color": "#eaeef3",
        };
      }
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    rowClick(row) {
      this.getIndex = row.index;
    },

    handleSizeChange(pageSize) {

      this.pageSize = pageSize;
      this.$forceUpdate();
    },
    handleCurrentChange(currentPage) {
     
      this.currentPage = currentPage;
      this.$forceUpdate();
    },
    handleSizeChangeroute(pageSize) {
      
      this.pageSizeroute = pageSize;
      this.$forceUpdate();
    },
    handleCurrentChangeroute(currentPage) {
    
      this.currentPageroute = currentPage;
      this.$forceUpdate();
    },
    addroute() {
      this.rucrouteadd = true;
      console.log(this.$store.getters.rcuroutedialog);
      this.rcuroutes = this.$store.getters.rcuroutedialog;
    },
    accessterminal() {
      this.addrcunat = true;
      console.log("添加接入终端");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.dispatch("addrcunat", this.form);
          this.addrcunat = false;
          this.$message({
            message: "success",
            type: "success",
          });
        } else {
          return false;
        }
      });
    },
    EidttForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.rcuform);
          this.$store.dispatch("Editrcunat", this.rcuform);
          this.editrcu = false;
          this.$message({
            message: "success",
            type: "success",
          });
        } else {
          return false;
        }
      });
    },
    handle(row) {
      console.log(row);
      this.postrcunat_task.rcu_id = row.id;
      console.log(this.postrcunat_task);
      this.$store.dispatch("getrcunattask", row.id);
      this.$store.dispatch("getrcurouter", row.id);
      this.rcuroute = true;
      this.rcunat = true;
      this.rucnatad = false;
      this.rucroutead = false;
      // this.addrcunat= true
    },
    handlercunat(row) {
      this.rcunat = false;
      console.log(row);
       this.postrcunat_task.rcu_nat_task_ids=[]
      console.log(row.id);
      this.postrcunat_task.rcu_nat_task_ids.push(row.id);
      console.log(this.postrcunat_task);
      // console.log(row);
    },
    handlercurouter(row) {
      this.rcuroute = false;
    },
    handleEdit(index, row) {
      console.log(index, row);
      console.log(this.form);
      this.editrcu = true;
      this.rcuform = row;
    },
    handleDelete(index, row) {
      this.$store.dispatch("Deletercunat", row);
    },
    addnat() {
      if (this.rcunattask.length == 0) {
        this.rucnatadd = true;
      }
    },
    handleaddrcurouter(row){
      this.rcuroute= false
      this.postrcunat_task.rcu_nat_task_ids=[]
      console.log(row);
      console.log(this.postrcunat_task);
      this.postrcunat_task.rcu_nat_task_ids.push(row.id)
    },
    handleaddrcunat(row) {
       this.postrcunat_task.rcu_nat_task_ids=[]
      this.handleaddrcunats = row;
      this.postrcunat_task.rcu_nat_task_ids.push(this.handleaddrcunats.id);
      console.log(this.postrcunat_task);
    },
    handlecreatedrcunat() {
      console.log(this.postrcunat_task);
      this.$store.dispatch("addrcunattask", this.postrcunat_task);
      this.rucnatadd = false;
    },
    deletenat() {
      this.$store.dispatch("deletercunattask", this.postrcunat_task);
    },
    deleteroute(){
      console.log(this.postrcunat_task);
    }
  },
  computed: {
    ...mapGetters(["rcunattaskdatas"]),
    accessterminalsdata() {
      return this.$store.getters.antennaDataTsableList;
    },
    rcunattask() {
      return this.$store.getters.rcunattaskdatas;
    },
    rcurouter() {
      return this.$store.getters.rcurouterdatas;
    },
    natdatas() {
      // console.log(this.$store.state.samnat.natdata);
      return this.$store.state.samnat.natdata;
    },
  },
};
</script>